
import { Input } from '@/components/ui/input';
import MenuToggle from '../components/MenuToggle';
import { CardContent, CardHeader, Card, CardTitle } from '@/components/ui/card';
import { Switch } from '@/components/ui/switch';
import { SelectItem, Select, SelectContent, SelectValue, SelectTrigger } from '@/components/ui/select';
import { Palette, Shield, RotateCcw, Moon, EyeOff, Upload, Sun, HardDrive, Eye, Volume2, Monitor, Globe, Battery, Save, Bell, Wifi, Download, Settings } from 'lucide-react';
import { Slider } from '@/components/ui/slider';
import React, { useState } from 'react';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';

const Preferences = ({ toggleSidebar }) => {
  // 主题设置
  const [themeSettings, setThemeSettings] = useState({
    theme: 'system', // light, dark, system
    accentColor: 'blue',
    fontSize: 'medium',
    compactMode: false
  });

  // 通知设置
  const [notificationSettings, setNotificationSettings] = useState({
    desktopNotifications: true,
    soundEnabled: true,
    emailDigest: true,
    pushNotifications: true,
    quietHours: false,
    quietStart: '22:00',
    quietEnd: '08:00'
  });

  // 隐私设置
  const [privacySettings, setPrivacySettings] = useState({
    analyticsEnabled: true,
    crashReporting: true,
    usageData: false,
    locationTracking: false,
    cookieConsent: true
  });

  // 存储设置
  const [storageSettings, setStorageSettings] = useState({
    autoSync: true,
    syncInterval: '15', // minutes
    cacheSize: [2], // GB
    autoCleanup: true,
    compressionEnabled: true
  });

  // 语言和地区设置
  const [localeSettings, setLocaleSettings] = useState({
    language: 'zh-CN',
    timezone: 'Asia/Shanghai',
    dateFormat: 'YYYY-MM-DD',
    timeFormat: '24h',
    currency: 'CNY'
  });

  // 高级设置
  const [advancedSettings, setAdvancedSettings] = useState({
    debugMode: false,
    experimentalFeatures: false,
    hardwareAcceleration: true,
    autoUpdates: true,
    betaUpdates: false
  });

  const handleSaveSettings = () => {
    // 这里应该调用API保存设置
    console.log('保存设置:', {
      theme: themeSettings,
      notifications: notificationSettings,
      privacy: privacySettings,
      storage: storageSettings,
      locale: localeSettings,
      advanced: advancedSettings
    });
    // 显示保存成功提示
    alert('设置已保存');
  };

  const handleResetSettings = () => {
    if (confirm('确定要重置所有设置到默认值吗？')) {
      // 重置所有设置到默认值
      setThemeSettings({
        theme: 'system',
        accentColor: 'blue',
        fontSize: 'medium',
        compactMode: false
      });
      setNotificationSettings({
        desktopNotifications: true,
        soundEnabled: true,
        emailDigest: true,
        pushNotifications: true,
        quietHours: false,
        quietStart: '22:00',
        quietEnd: '08:00'
      });
      setPrivacySettings({
        analyticsEnabled: true,
        crashReporting: true,
        usageData: false,
        locationTracking: false,
        cookieConsent: true
      });
      setStorageSettings({
        autoSync: true,
        syncInterval: '15',
        cacheSize: [2],
        autoCleanup: true,
        compressionEnabled: true
      });
      setLocaleSettings({
        language: 'zh-CN',
        timezone: 'Asia/Shanghai',
        dateFormat: 'YYYY-MM-DD',
        timeFormat: '24h',
        currency: 'CNY'
      });
      setAdvancedSettings({
        debugMode: false,
        experimentalFeatures: false,
        hardwareAcceleration: true,
        autoUpdates: true,
        betaUpdates: false
      });
    }
  };

  return (
    <>
      {/* 头部工具栏 */}
      <div className="mt-3">
        <div className="mx-10 px-4 py-4">
          <div className="flex items-center justify-between">
            {/* 左侧：菜单按钮和标题 */}
            <div className="flex items-center space-x-4">
              <MenuToggle onClick={toggleSidebar} />
              
              <div className="flex items-center space-x-3">
                <div className="w-10 h-10 bg-gradient-to-br from-primary to-primary-600 rounded-xl flex items-center justify-center">
                  <Settings className="w-6 h-6 text-white" />
                </div>
                <div>
                  <h1 className="text-2xl font-bold text-material-grey-800">
                    偏好设置
                  </h1>
                  <p className="text-sm text-material-grey-600">
                    自定义您的应用体验和偏好
                  </p>
                </div>
              </div>
            </div>

            {/* 右侧：操作按钮 */}
            <div className="flex items-center space-x-3">
              <Button variant="outline" onClick={handleResetSettings}>
                <RotateCcw className="w-4 h-4 mr-2" />
                重置设置
              </Button>
              <Button onClick={handleSaveSettings} className="bg-gradient-to-r from-primary to-primary-600 hover:from-primary-600 hover:to-primary-700">
                <Save className="w-4 h-4 mr-2" />
                保存设置
              </Button>
            </div>
          </div>
        </div>
      </div>

      {/* 主内容区域 */}
      <div className="flex-1 mx-10 px-4 py-6">
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
          {/* 外观设置 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Palette className="w-5 h-5" />
                <span>外观设置</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <Label htmlFor="theme">主题模式</Label>
                <Select value={themeSettings.theme} onValueChange={(value) => setThemeSettings(prev => ({ ...prev, theme: value }))}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="light">
                      <div className="flex items-center space-x-2">
                        <Sun className="w-4 h-4" />
                        <span>浅色模式</span>
                      </div>
                    </SelectItem>
                    <SelectItem value="dark">
                      <div className="flex items-center space-x-2">
                        <Moon className="w-4 h-4" />
                        <span>深色模式</span>
                      </div>
                    </SelectItem>
                    <SelectItem value="system">
                      <div className="flex items-center space-x-2">
                        <Monitor className="w-4 h-4" />
                        <span>跟随系统</span>
                      </div>
                    </SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="accentColor">主题色</Label>
                <Select value={themeSettings.accentColor} onValueChange={(value) => setThemeSettings(prev => ({ ...prev, accentColor: value }))}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="blue">蓝色</SelectItem>
                    <SelectItem value="green">绿色</SelectItem>
                    <SelectItem value="purple">紫色</SelectItem>
                    <SelectItem value="orange">橙色</SelectItem>
                    <SelectItem value="red">红色</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="fontSize">字体大小</Label>
                <Select value={themeSettings.fontSize} onValueChange={(value) => setThemeSettings(prev => ({ ...prev, fontSize: value }))}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="small">小</SelectItem>
                    <SelectItem value="medium">中</SelectItem>
                    <SelectItem value="large">大</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="compactMode">紧凑模式</Label>
                  <p className="text-sm text-material-grey-600">减少界面间距，显示更多内容</p>
                </div>
                <Switch
                  id="compactMode"
                  checked={themeSettings.compactMode}
                  onCheckedChange={(checked) => setThemeSettings(prev => ({ ...prev, compactMode: checked }))}
                />
              </div>
            </CardContent>
          </Card>

          {/* 通知设置 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Bell className="w-5 h-5" />
                <span>通知设置</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="desktopNotifications">桌面通知</Label>
                  <p className="text-sm text-material-grey-600">显示系统通知</p>
                </div>
                <Switch
                  id="desktopNotifications"
                  checked={notificationSettings.desktopNotifications}
                  onCheckedChange={(checked) => setNotificationSettings(prev => ({ ...prev, desktopNotifications: checked }))}
                />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="soundEnabled">声音提醒</Label>
                  <p className="text-sm text-material-grey-600">播放通知声音</p>
                </div>
                <Switch
                  id="soundEnabled"
                  checked={notificationSettings.soundEnabled}
                  onCheckedChange={(checked) => setNotificationSettings(prev => ({ ...prev, soundEnabled: checked }))}
                />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="emailDigest">邮件摘要</Label>
                  <p className="text-sm text-material-grey-600">定期发送活动摘要</p>
                </div>
                <Switch
                  id="emailDigest"
                  checked={notificationSettings.emailDigest}
                  onCheckedChange={(checked) => setNotificationSettings(prev => ({ ...prev, emailDigest: checked }))}
                />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="quietHours">免打扰时间</Label>
                  <p className="text-sm text-material-grey-600">在指定时间段内静音通知</p>
                </div>
                <Switch
                  id="quietHours"
                  checked={notificationSettings.quietHours}
                  onCheckedChange={(checked) => setNotificationSettings(prev => ({ ...prev, quietHours: checked }))}
                />
              </div>

              {notificationSettings.quietHours && (
                <div className="grid grid-cols-2 gap-4 ml-6">
                  <div>
                    <Label htmlFor="quietStart">开始时间</Label>
                    <Input
                      id="quietStart"
                      type="time"
                      value={notificationSettings.quietStart}
                      onChange={(e) => setNotificationSettings(prev => ({ ...prev, quietStart: e.target.value }))}
                    />
                  </div>
                  <div>
                    <Label htmlFor="quietEnd">结束时间</Label>
                    <Input
                      id="quietEnd"
                      type="time"
                      value={notificationSettings.quietEnd}
                      onChange={(e) => setNotificationSettings(prev => ({ ...prev, quietEnd: e.target.value }))}
                    />
                  </div>
                </div>
              )}
            </CardContent>
          </Card>

          {/* 隐私设置 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Shield className="w-5 h-5" />
                <span>隐私设置</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="analyticsEnabled">数据分析</Label>
                  <p className="text-sm text-material-grey-600">帮助改进产品体验</p>
                </div>
                <Switch
                  id="analyticsEnabled"
                  checked={privacySettings.analyticsEnabled}
                  onCheckedChange={(checked) => setPrivacySettings(prev => ({ ...prev, analyticsEnabled: checked }))}
                />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="crashReporting">崩溃报告</Label>
                  <p className="text-sm text-material-grey-600">自动发送错误报告</p>
                </div>
                <Switch
                  id="crashReporting"
                  checked={privacySettings.crashReporting}
                  onCheckedChange={(checked) => setPrivacySettings(prev => ({ ...prev, crashReporting: checked }))}
                />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="usageData">使用数据</Label>
                  <p className="text-sm text-material-grey-600">收集使用统计信息</p>
                </div>
                <Switch
                  id="usageData"
                  checked={privacySettings.usageData}
                  onCheckedChange={(checked) => setPrivacySettings(prev => ({ ...prev, usageData: checked }))}
                />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="locationTracking">位置跟踪</Label>
                  <p className="text-sm text-material-grey-600">允许获取位置信息</p>
                </div>
                <Switch
                  id="locationTracking"
                  checked={privacySettings.locationTracking}
                  onCheckedChange={(checked) => setPrivacySettings(prev => ({ ...prev, locationTracking: checked }))}
                />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="cookieConsent">Cookie 同意</Label>
                  <p className="text-sm text-material-grey-600">允许使用 Cookie</p>
                </div>
                <Switch
                  id="cookieConsent"
                  checked={privacySettings.cookieConsent}
                  onCheckedChange={(checked) => setPrivacySettings(prev => ({ ...prev, cookieConsent: checked }))}
                />
              </div>
            </CardContent>
          </Card>

          {/* 存储设置 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <HardDrive className="w-5 h-5" />
                <span>存储设置</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="autoSync">自动同步</Label>
                  <p className="text-sm text-material-grey-600">自动同步文件到云端</p>
                </div>
                <Switch
                  id="autoSync"
                  checked={storageSettings.autoSync}
                  onCheckedChange={(checked) => setStorageSettings(prev => ({ ...prev, autoSync: checked }))}
                />
              </div>

              <div>
                <Label htmlFor="syncInterval">同步间隔</Label>
                <Select value={storageSettings.syncInterval} onValueChange={(value) => setStorageSettings(prev => ({ ...prev, syncInterval: value }))}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="5">5 分钟</SelectItem>
                    <SelectItem value="15">15 分钟</SelectItem>
                    <SelectItem value="30">30 分钟</SelectItem>
                    <SelectItem value="60">1 小时</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="cacheSize">缓存大小: {storageSettings.cacheSize[0]} GB</Label>
                <Slider
                  id="cacheSize"
                  min={1}
                  max={10}
                  step={1}
                  value={storageSettings.cacheSize}
                  onValueChange={(value) => setStorageSettings(prev => ({ ...prev, cacheSize: value }))}
                  className="mt-2"
                />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="autoCleanup">自动清理</Label>
                  <p className="text-sm text-material-grey-600">定期清理临时文件</p>
                </div>
                <Switch
                  id="autoCleanup"
                  checked={storageSettings.autoCleanup}
                  onCheckedChange={(checked) => setStorageSettings(prev => ({ ...prev, autoCleanup: checked }))}
                />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="compressionEnabled">文件压缩</Label>
                  <p className="text-sm text-material-grey-600">压缩文件以节省空间</p>
                </div>
                <Switch
                  id="compressionEnabled"
                  checked={storageSettings.compressionEnabled}
                  onCheckedChange={(checked) => setStorageSettings(prev => ({ ...prev, compressionEnabled: checked }))}
                />
              </div>
            </CardContent>
          </Card>

          {/* 语言和地区 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Globe className="w-5 h-5" />
                <span>语言和地区</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div>
                <Label htmlFor="language">界面语言</Label>
                <Select value={localeSettings.language} onValueChange={(value) => setLocaleSettings(prev => ({ ...prev, language: value }))}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="zh-CN">简体中文</SelectItem>
                    <SelectItem value="zh-TW">繁体中文</SelectItem>
                    <SelectItem value="en-US">English (US)</SelectItem>
                    <SelectItem value="ja-JP">日本語</SelectItem>
                    <SelectItem value="ko-KR">한국어</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="timezone">时区</Label>
                <Select value={localeSettings.timezone} onValueChange={(value) => setLocaleSettings(prev => ({ ...prev, timezone: value }))}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="Asia/Shanghai">北京时间 (UTC+8)</SelectItem>
                    <SelectItem value="Asia/Tokyo">东京时间 (UTC+9)</SelectItem>
                    <SelectItem value="America/New_York">纽约时间 (UTC-5)</SelectItem>
                    <SelectItem value="Europe/London">伦敦时间 (UTC+0)</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="dateFormat">日期格式</Label>
                <Select value={localeSettings.dateFormat} onValueChange={(value) => setLocaleSettings(prev => ({ ...prev, dateFormat: value }))}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="YYYY-MM-DD">2024-01-20</SelectItem>
                    <SelectItem value="MM/DD/YYYY">01/20/2024</SelectItem>
                    <SelectItem value="DD/MM/YYYY">20/01/2024</SelectItem>
                    <SelectItem value="YYYY年MM月DD日">2024年01月20日</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="timeFormat">时间格式</Label>
                <Select value={localeSettings.timeFormat} onValueChange={(value) => setLocaleSettings(prev => ({ ...prev, timeFormat: value }))}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="24h">24小时制</SelectItem>
                    <SelectItem value="12h">12小时制</SelectItem>
                  </SelectContent>
                </Select>
              </div>

              <div>
                <Label htmlFor="currency">货币</Label>
                <Select value={localeSettings.currency} onValueChange={(value) => setLocaleSettings(prev => ({ ...prev, currency: value }))}>
                  <SelectTrigger>
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="CNY">人民币 (¥)</SelectItem>
                    <SelectItem value="USD">美元 ($)</SelectItem>
                    <SelectItem value="EUR">欧元 (€)</SelectItem>
                    <SelectItem value="JPY">日元 (¥)</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </CardContent>
          </Card>

          {/* 高级设置 */}
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center space-x-2">
                <Settings className="w-5 h-5" />
                <span>高级设置</span>
              </CardTitle>
            </CardHeader>
            <CardContent className="space-y-6">
              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="debugMode">调试模式</Label>
                  <p className="text-sm text-material-grey-600">显示详细的调试信息</p>
                </div>
                <Switch
                  id="debugMode"
                  checked={advancedSettings.debugMode}
                  onCheckedChange={(checked) => setAdvancedSettings(prev => ({ ...prev, debugMode: checked }))}
                />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="experimentalFeatures">实验性功能</Label>
                  <p className="text-sm text-material-grey-600">启用测试中的新功能</p>
                </div>
                <Switch
                  id="experimentalFeatures"
                  checked={advancedSettings.experimentalFeatures}
                  onCheckedChange={(checked) => setAdvancedSettings(prev => ({ ...prev, experimentalFeatures: checked }))}
                />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="hardwareAcceleration">硬件加速</Label>
                  <p className="text-sm text-material-grey-600">使用GPU加速渲染</p>
                </div>
                <Switch
                  id="hardwareAcceleration"
                  checked={advancedSettings.hardwareAcceleration}
                  onCheckedChange={(checked) => setAdvancedSettings(prev => ({ ...prev, hardwareAcceleration: checked }))}
                />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="autoUpdates">自动更新</Label>
                  <p className="text-sm text-material-grey-600">自动下载并安装更新</p>
                </div>
                <Switch
                  id="autoUpdates"
                  checked={advancedSettings.autoUpdates}
                  onCheckedChange={(checked) => setAdvancedSettings(prev => ({ ...prev, autoUpdates: checked }))}
                />
              </div>

              <div className="flex items-center justify-between">
                <div>
                  <Label htmlFor="betaUpdates">测试版更新</Label>
                  <p className="text-sm text-material-grey-600">接收测试版本更新</p>
                </div>
                <Switch
                  id="betaUpdates"
                  checked={advancedSettings.betaUpdates}
                  onCheckedChange={(checked) => setAdvancedSettings(prev => ({ ...prev, betaUpdates: checked }))}
                />
              </div>
            </CardContent>
          </Card>
        </div>

        {/* 底部操作栏 */}
        <div className="mt-8 flex items-center justify-center space-x-4 p-6 bg-white rounded-lg shadow-material-1">
          <Button variant="outline" onClick={handleResetSettings} size="lg">
            <RotateCcw className="w-5 h-5 mr-2" />
            重置所有设置
          </Button>
          <Button onClick={handleSaveSettings} size="lg" className="bg-gradient-to-r from-primary to-primary-600 hover:from-primary-600 hover:to-primary-700">
            <Save className="w-5 h-5 mr-2" />
            保存所有设置
          </Button>
        </div>
      </div>
    </>
  );
};

export default Preferences;

